import React from 'react'
import { inject, observer } from 'mobx-react'
import { withStyles } from '@material-ui/core/styles'
import PropTypes from 'prop-types'

import TextField from '@material-ui/core/TextField'
import Radio from '@material-ui/core/Radio'
import Button from '@material-ui/core/Button'
import Send from '@material-ui/icons/Send'

import SimpleMDE from 'react-simplemde-editor'

import { tabs } from '../../util/variable-define'
import Container from '../layout/container'
import TopicCreateStyle from './styles'

@inject((stores) => {
  return {
    topicStore: stores.topicStore,
    appState: stores.appState,
  }
}) @observer
class TopicCreate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '',
      content: '',
      tab: 'dev',
    }

    this.handleTitleChange = this.handleTitleChange.bind(this)
    this.handleContentChange = this.handleContentChange.bind(this)
    this.handleChangeTab = this.handleChangeTab.bind(this)
    this.handleCreate = this.handleCreate.bind(this)
  }

  componentDidMount() {
    // doing
  }

  handleTitleChange(e) {
    this.setState({
      title: e.target.value,
    })
  }

  handleContentChange(value) {
    this.setState({
      content: value,
    })
  }

  handleChangeTab(e) {
    this.setState({
      tab: e.target.value,
    })
  }

  handleCreate() {
    const {
      tab, title, content,
    } = this.state
    const appState = this.props.appState
    if (!title) {
      return appState.notify({
        message: '标题必须填写',
      })
    }
    if (!content) {
      return appState.notify({
        message: '内容不能为空',
      })
    }
    return this.props.topicStore.postTopic(title, tab, content)
      .then(() => {
        this.props.history.push('/')
      })
      .catch((err) => {
        appState.notify({
          message: err.message,
        })
      })
  }

  render() {
    const classes = this.props.classes
    return (
      <Container>
        <div className={classes.root}>
          <TextField
            className={classes.title}
            label="标题"
            onChange={this.handleTitleChange}
            fullWidth
          />
          <div>
            {
              Object.keys(tabs).map((tab) => {
                if (tab !== 'all' && tab !== 'good') {
                  return (
                    <span className={classes.selectItem} key={tab}>
                      <Radio
                        value={tab}
                        checked={tab === this.state.tab}
                        onChange={this.handleChangeTab}
                      />
                      {tabs[tab]}
                    </span>
                  )
                }
                return null
              })
            }
          </div>
          <TextField
            id="content"
            label="Content"
            multiline
            fullWidth
            onChange={this.handleContentChange}
            className={classes.textField}
            margin="normal"
            helperText="Markdown"
            variant="outlined"
          />
          <SimpleMDE
            onChange={this.handleContentChange}
            value={this.state.content}
            options={{
              toolbar: false,
              autoFocus: false,
              spellCheck: false,
              placeContent: '写点东东吧别客气~',
            }}
          />
          <Button fab="true" color="primary" onClick={this.handleCreate} className={classes.replyButton}>
            <Send />
          </Button>
        </div>
      </Container>
    )
  }
}

TopicCreate.wrappedComponent.propTypes = {
  topicStore: PropTypes.object.isRequired,
  appState: PropTypes.object.isRequired,
}

TopicCreate.propTypes = {
  classes: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired,
}

export default withStyles(TopicCreateStyle)(TopicCreate)
